<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Pie Chart</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2009 Martin Lessacher<br/>
</p>


<h2 class="title">Pie Chart</h2>
<p>First seen in Playfair [1786] the pie chart is among the most popular types of charts. It consists of a circle
composed of several sectors, each representing a different entity. The area of each sector represents its
proportional significance. The larger the area of a sector, the larger its significance. The main problem of
pie charts is that if its sectors are roughly evenly distributed, it is very hard to distinguish between their
significance. There are many variants of pie charts, including for example 3D pie charts and exploded
pie charts.<p>

<br />
	
<br />

<br />
<table width="1250" border="0" cellspacing="10">
  <tr>
    <td><a href="images/piechart.png"><img class="center" src="images/piechart.png" alt="The Liquid Diagrams pie chart visualisation." width="600" height="350"/></a></td>
    <td><a href="images/piechart_3d.png"><img class="center" src="images/piechart_3d.png" alt="The Liquid Diagrams pie chart visualisation using 3D mode." width="600" height="350"/></a></td>
  </tr>
</table>
<br/>

<h2 class="title">Features</h2>

<b>Changing the colours of entities</b><br/>
<p>Initially the colours used in a visualisation depend on the chosen colour scheme. Colour schemes
are colour palettes that define a limited amount of colours that are used in a visualisation. The 
colour schemes where taken from <a href="http://de-de.colourlovers.com">COLOURLovers</a>. If a colour scheme has
less colours defined than entities are present in a data set the colours are repeated.</p>

<p>All colours used to draw entities can be changed by using a colour picker. To change the colour of a specific entity the user has to
click on the colour rectangle, representing the entities colour, in the legend panel. This will bring
up the colour picker. After selecting the colour the selection is verified with the Ok button and the
colour is immediately assigned to the entity.</p><br/>

<b>Changing fonts</b><br/>
<p>All the fonts used in the visualisations can be replaced by other fonts. To do this the user has to switch
to the "Font" panel in the options and choose a font colour, size and type for the desired font 
category. When using the corresponding buttons it is possible to set the font style to bold, italic and 
underline. The selected fonts are loaded on runtime into the gadget.</p><br/>

<b>Hide single entities</b><br/>
<p>Entities can be hidden by clicking on an entities name in the legend panel while holding down the
ALT key. Clicking once more will show the entity again.</p><br/>

<b>Changing diagram titles</b><br/>
<p>The user can dynamically alter the diagram title by clicking on the appropriate label. A text box will then appear to enter the new title. The edit process is finished
by confirming the changes with the enter key.</p><br/>

<b>Transpose the data</b><br/>
<p>All Liquid Diagrams Gadgets offer a function to transpose data. This is especially useful if the
data is in the wrong format and it would take several minutes to transpose it by using other applications.
For example Google Docs the only external data source currently available does not
have a function to transpose the data. The transpose option is available among the gadget settings
(almost at the bottom of the gadget options frame) when adding the gadget to the spreadsheet.</p><br/>

<b>Interactively changing gadget settings</b><br/>
<p>Using Google Docs it is not possible to change the gadget settings without losing all changes that
have been made in the visualisation. That means if changes like filters, swapped axes, hidden
data,... have been made they will be reset when changing the gadget parameters with the default
Google gadget settings. This is due to the fact that a new gadget request is sent by Google and the
visualisation is created once again.</p>

<p>Using the Options Panel the user is able to change the parameters dynamically while
exploring the data. This is done through a separate gadget settings menu displayed to the left side
of the visualisation.</p><br/>

<b>Pie Size</b><br/>
<p>Per default the radius of the pie chart fits into the available space. This is symbolized by a radius value of 100 percent. 
However if a smaller pie size is desired it can be achieved by entering a scaling for the radius between 1 and 100 percent.</p><br/>

<b>Labelling</b><br/>
<p>There are three different types of labels that can be shown or hidden using the Options Panel. These labels are the name of the entity, the value of the entity, and the entity's share of the total in percent.</p>

<p>The placement of labels can also be adjusted using the Options Panel. The slider "Label Radius" is used to set the 
radius where the labels should be displayed. If a value greater than 100 is used, the labels are drawn outside of the pie.</p><br/>

<b>Click Animation</b><br/>
<p>The visualisation also implements a slice-slide animation, when an entity or its legend label is clicked. The first time it is 
clicked the slice is moved away from the centre and the second click brings the slice back to its old position.</p><br/>

<b>3D</b><br/>
<p>The visualisation implements a 3D view as well. To enable it the checkbox "Show 3D" in the panel "3D" in the options has to be checked.
In addition the data of a second data column can be displayed as an extrusion of the pie pieces. The rotation of the pie chart can be set using
several sliders.</p><br/>
<br/>

<h2 class="title">Data Format</h2>
<p>The data format of this visualisation can be seen in the <a href="dataformats.html#pie">data formats document</a>.</p>
<br /><br />

<h2 class="title">Parameter List</h2>

<table width="1290" border="1">
  <tr>
    <td width="65" align="center">Number</td>
    <td width="225" align="left">Parameter</td>
    <td width="98" align="center">Type</td>
    <td width="163" align="center">Options</td>
    <td width="705" align="left">Description</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="left">X-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The x-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="left">Y-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The y-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="left">Legend</td>
    <td align="center">String</td>
    <td align="center">No Legend | Horizontal | Vertical</td>
    <td align="left">Determines the legend position.</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="left">Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="left">Number Display Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Defines how numbers are to be displayed within the diagram.</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="left">Radius</td>
    <td align="center">Number</td>
    <td align="center">1-100</td>
    <td align="left">The desired radius of the pie. The value needs to be entered in percent based on the available diagram space.</td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td align="left">Number Input Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Determines the format in which the supplied data is formatted.</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="left">Transpose Data</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether the data is transposed or not.</td>
  </tr>
  <tr>
    <td align="center">9</td>
    <td align="left">Label Radius</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The label radius determines where the labels are placed. The value needs to be entered in percent of the pie radius.</td>
  </tr>
  <tr>
    <td align="center">10</td>
    <td align="left">Show Label</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the name label of each pie sector.</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="left">Show Values</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the value label of each pie sector.</td>
  </tr>
  <tr>
    <td align="center">12</td>
    <td align="left">Show Percent</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the percentage label of each pie sector.</td>
  </tr>
  <tr>
    <td align="center">13</td>
    <td align="left">Host URL</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">URL of the gadget. There needs to be a colour scheme file available at "./common/color-schemes.xml" or the standard colour scheme will be used. 
The precompiled font files which can be loaded on runntime have to be stored in "./common/fonts/".</td>
  </tr>
  <tr>
    <td align="center">14</td>
    <td align="left">Show Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the diagram title.</td>
  </tr>
  <tr>
    <td align="center">15</td>
    <td align="left">Use Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to use a custom display ratio or not. If yes, x-ratio and y-ratio need to be supplied also.</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="left">X-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Width ratio factor.</td>
  </tr>
  <tr>
    <td align="center">17</td>
    <td align="left">Y-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height ratio factor.</td>
  </tr>
  <tr>
    <td align="center">18</td>
    <td align="left">Show 3D</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Switches to 3D mode.</td>
  </tr>
  <tr>
    <td align="center">19</td>
    <td align="left">Show Extrusion</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Switches to 3D extrusion mode.</td>
  </tr>
  <tr>
    <td align="center">20</td>
    <td align="left">Show Edges</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to draw white lines at the edges of the 3D pie chart or not.</td>
  </tr>
  <tr>
    <td align="center">21</td>
    <td align="left">Extrusion Height</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Determines the height of the extrusion.</td>
  </tr>
  <tr>
    <td align="center">22</td>
    <td align="left">X Rotation</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Amount of degrees the pie chart is rotated on the x axis when the 3D mode is enabled.</td>
  </tr>
  <tr>
    <td align="center">23</td>
    <td align="left">Y Rotation</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Amount of degrees the pie chart is rotated on the y axis when the 3D mode is enabled.</td>
  </tr>
  <tr>
    <td align="center">24</td>
    <td align="left">Z Rotation</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Amount of degrees the pie chart is rotated on the z axis when the 3D mode is enabled.</td>
  </tr>
  <tr>
    <td align="center">25</td>
    <td align="left">Base Height</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height of the base of the pie chart in the 3D mode.</td>
  </tr>
</table>

</body>
</html>
